<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="120px">
      <h2 style="text-align: center">设备验收</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="购置编号" prop="buyCode">
            <el-select v-if="!($route.query.isInfo || isInfo)" v-model="formData.buyCode" placeholder="请选择设购置编号" clearable
              filterable @change="changeDevice" :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.code" :value="item.code"
                :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.code
                }}</span>
              </el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.buyCode" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>

            <!-- <el-input
              disabled
              v-model="formData.buyCode"
              placeholder="请输入购置编号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceName">
            <el-select v-if="!($route.query.isInfo || isInfo)" disabled v-model="formData.deviceName"
              placeholder="请选择设备名称" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                :value="item.deviceName" :disabled="item.disabled"></el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>

            <!-- <el-input
              disabled
              v-model="formData.deviceName"
              placeholder="请输入设备名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input> -->
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="规格型号" prop="spec">
            <el-input v-model="formData.spec" placeholder="请输入规格型号" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备数量" prop="num">
            <el-input-number disabled :style="{ width: '100%' }" v-model="formData.num" placeholder="设备数量" :step="1"
              controls-position="right">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-select filterable v-model="formData.manufacturer" placeholder="请选择生产厂家" clearable
              :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_manufacturer_list" :key="dict.value" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂编号" prop="code">
            <el-input v-model="formData.code" placeholder="请输入出厂编号" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="购置日期" prop="buyDate">
            <el-date-picker v-model="formData.buyDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择购置日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂日期" prop="outDate">
            <el-date-picker v-model="formData.outDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择出厂日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="验收日期" prop="checkDate">
            <el-date-picker v-model="formData.checkDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择验收日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="包装外观" prop="isPackage">
            <el-radio-group v-model="formData.isPackage" size="medium">
              <el-radio v-for="(item, index) in isPackageOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备外观 " prop="isDeviceAppearance">
            <el-radio-group v-model="formData.isDeviceAppearance" size="medium">
              <el-radio v-for="(item, index) in isDeviceAppearanceOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col></el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="产品合格证" prop="isQualified">
            <el-radio-group v-model="formData.isQualified" size="medium">
              <el-radio v-for="(item, index) in isQualifiedOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用说明书" prop="isUse">
            <el-radio-group v-model="formData.isUse" size="medium">
              <el-radio v-for="(item, index) in isUseOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同情况" prop="isAgreement">
            <el-radio-group v-model="formData.isAgreement" size="medium">
              <el-radio v-for="(item, index) in isAgreementOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="开票日期" prop="invoiceTime">
            <el-date-picker
              v-model="formData.invoiceTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择开票日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-form-item label="安装调试情况" prop="info">
        <el-input v-model="formData.info" type="textarea" placeholder="请输入安装调试情况" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item label="补充说明" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入补充说明" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <!-- <h4 class="form-header h4">发票</h4>
      <el-form-item label="" prop="invoiceUrl">
        <FileUpload
          :isDelete="!$route.query.isInfo"
          v-model="formData.invoiceUrl"
        ></FileUpload>
      </el-form-item> -->
      <h4 class="form-header h4">产品合格证</h4>
      <el-form-item label="" prop="operateUrl">
        <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.operateUrl"></FileUpload>
      </el-form-item>
      <h4 class="form-header h4">使用说明书</h4>
      <el-form-item label="" prop="assignmentUrl">
        <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.assignmentUrl"></FileUpload>
      </el-form-item>
      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="!($route.query.isInfo || isInfo)&&formData.status != 'end'" type="primary" @click="submitForm(0)">暂存</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { listSelect } from "@/api/device/deviceBuy.js";

import {
  deviceCheckAdd,
  updategdeviceCheck,
  deviceCheckInfo,
  updateCheck
} from "@/api/device/deviceCheck.js";
export default {
  components: {},
  dicts: ["sys_manufacturer_list"],
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      deviceOptions: [],

      formData: {
        invoiceUrl: undefined,
        remark: undefined,
        deviceName: undefined,
        spec: undefined,
        num: undefined,
        code: undefined,
        manufacturer: undefined,
        buyDate: null,
        checkDate: null,
        outDate: null,
        isPackage: "0",
        isDeviceAppearance: "0",
        isQualified: "0",
        isUse: "0",
        isAgreement: "0",
        info: undefined,
        invoiceTime: null,
      },
      rules: {
        invoiceUrl: [
          {
            required: true,
            message: "请上传发票",
            trigger: "change",
          },
        ],
        invoiceTime: [
          {
            required: true,
            message: "请选择开票日期",
            trigger: "change",
          },
        ],
        info: [
          {
            required: true,
            message: "请输入安装调试情况",
            trigger: "blur",
          },
        ],
        deviceName: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        spec: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "补充说明不能为空",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "设备数量",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        manufacturer: [
          {
            required: true,
            message: "请选择生产厂家",
            trigger: "change",
          },
        ],
        buyDate: [
          {
            required: true,
            message: "请选择购置日期",
            trigger: "change",
          },
        ],
        checkDate: [
          {
            required: true,
            message: "请选择验收日期",
            trigger: "change",
          },
        ],
        outDate: [
          {
            required: false,
            message: "请选择出厂日期",
            trigger: "change",
          },
        ],
        isPackage: [
          {
            required: true,
            message: "包装外观不能为空",
            trigger: "change",
          },
        ],
        isDeviceAppearance: [
          {
            required: true,
            message: "设备外观 不能为空",
            trigger: "change",
          },
        ],
        isQualified: [
          {
            required: true,
            message: "产品合格证不能为空",
            trigger: "change",
          },
        ],
        isUse: [
          {
            required: true,
            message: "使用说明书不能为空",
            trigger: "change",
          },
        ],
        isAgreement: [
          {
            required: true,
            message: "合同情况不能为空",
            trigger: "change",
          },
        ],
      },
      isPackageOptions: [
        {
          label: "完好",
          value: 0,
        },
        {
          label: "破损",
          value: 1,
        },
      ],
      isDeviceAppearanceOptions: [
        {
          label: "完好",
          value: 0,
        },
        {
          label: "破损",
          value: 1,
        },
      ],
      isQualifiedOptions: [
        {
          label: "有",
          value: 0,
        },
        {
          label: "无",
          value: 1,
        },
      ],
      isUseOptions: [
        {
          label: "有",
          value: 0,
        },
        {
          label: "无",
          value: 1,
        },
      ],
      isAgreementOptions: [
        {
          label: "符合",
          value: 0,
        },
        {
          label: "不符合",
          value: 1,
        },
      ],
    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    this.formData.buyCode = this.$route.query.code;
    this.formData.deviceBuyId = this.$route.query.buyId;
    this.formData.deviceName = this.$route.query.deviceName;
  },
  mounted() { },
  methods: {
    changeDevice(i) {
      if (!i) return;
      let row = this.deviceOptions.find((e) => e.code == i);
      console.log(row);
      if (row) {
        this.formData.deviceName = row.deviceName;
        this.formData.deviceBuyId = row.deviceBuyId;
        this.formData.num = row.num;
      } else {
        this.formData.deviceName = undefined;
        this.formData.num = undefined;

        this.formData.deviceBuyId = undefined;
      }
      console.log(row);
    },
    listSelect() {
      listSelect().then((response) => {
        this.deviceOptions = response.data;
        this.changeDevice(this.$route.query.code);
      });
    },
    getinfo() {
      return deviceCheckInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
        }
      );
    },
    submitForm(e) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status != 'end') {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      if (e == 0) {
        if (!this.formData.buyCode) {
          this.$message.warning("请先选择购置编号");
          return;
        }
        if (this.formData.deviceCheckId != undefined) {
            updategdeviceCheck(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceCheckAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        return
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (query.status == 'end') {
            updateCheck(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
            this.resetForm();
            return
          }
          if (this.formData.deviceCheckId != undefined) {
            updategdeviceCheck(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceCheckAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
